<template>
  <div class="basis">
    <div v-html="welcome"></div>
    <FirstDay v-for="(item,index) in funtions" :key="index" v-bind:item="item" :index="index"></FirstDay>
  </div>
</template>

<script>
/**
  <!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
 */

import FirstDay from "../components/BasedOnLearning/FirstDay";
import SecondDay from "../components/BasedOnLearning/SecondDay";

export default {
  name: "basis",
  components: {
    FirstDay,
    SecondDay
  },
  data() {
    return {
      welcome: "<h1 style='color: white;'>Vue 基础学习</h1>",
      funtions: [
        {
          title: "第一天",
          closed: false
        },
        { title: "第二天", closed: false },
        { title: "第三天", closed: false },
        { title: "第四天", closed: false },
        { title: "第五天", closed: false },
        { title: "iView 第一天", closed: true }
      ]
    };
  },
  beforeCreate: function() {
    console.log("------beforeCreate创建前状态------");
  },
  created: function() {
    console.log("加载完成");
  },
  beforeMount() {
    console.log("挂起前的状态");
  },
  mounted: function() {
    console.log("------mounted 挂载结束状态------");
  },
  beforeUpdate: function() {
    console.log("beforeUpdate 更新前状态===============》");
  },
  updated: function() {
    console.log("updated 更新完成状态===============》");
  },
  methods: {},
  watch: {}
};
</script>

<style scoped>
</style>
